<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #container{
			width: 80%;
			height: 600px;
			background: #000;
			margin:20px auto;
			position: relative;
			overflow: hidden;
		}
		.fire{
			width: 10px;
			height:10px;
			position: absolute;
			bottom: 0;
		}
		.small-fire{
			width: 10px;
			height:10px;
			position: absolute;
			border-radius: 50%;
		}
    </style>
</head>
<body>
    <div id="container"></div>
</body>
<script src="../move.js"></script>
<script>
    // OOA：烟花：创建元素，元素运动，删除，在创建，运动，删除
        // 一、主体烟花类
        // 1. 创建元素，初始位置
        // 2. 运动，目标位置
            // 3. 结束，删除，创建多个小烟花
        // 二、小烟花类
        // 1. 创建元素，初始位置
        // 2. 运动，随机位置
            // 3. 结束，删除
    // OOD：
        // class Fire{
        //     constructor(){}
        //     createEle(){
        //         // 创建元素，初始位置
        //         // ...
        //         // 执行运动
        //         this.move()
        //     }
        //     move(){
        //         // 开始运动
        //             // 结束，删除，创建多个小烟花
        //             // 循环：new SmallFire()
        //     }
        // }
        // class SmallFire{
        //     constructor(){}
        //     createEle(){
        //         // 创建元素，初始位置
        //         // ...
        //         // 执行运动
        //         this.move()
        //     }
        //     move(){
        //         // 开始运动
        //             // 结束，删除
        //     }
        // }
        // const cont = document.getElementById("container");
        // cont.onclick = function(){
        //     new Fire();
        // }

    // OOP：
        class Fire{
            constructor(aaa){
                // 接收并处理参数
                this.aaa = aaa;
                // 执行创建元素，设置初始位置
                this.createEle();
            }
            createEle(){
                // 创建元素，初始位置
                this.ele = document.createElement("div");
                this.ele.className = "fire";
                this.ele.style.background = randomColor();
                this.ele.style.left = this.aaa.x + "px";
                this.aaa.cont.appendChild(this.ele);
                // 执行运动
                this.move()
            }
            move(){
                // 开始运动
                move(this.ele, {
                    top: this.aaa.y
                },()=>{
                    // 结束，删除
                    this.ele.remove()
                    const num = random(10, 20);
                    // 循环，创建多个小烟花
                    for(let i=0;i<num;i++){
                        new SmallFire(this.aaa);
                    }
                })
            }
        }
        class SmallFire{
            constructor(bbb){
                this.bbb = bbb;
                // 执行创建元素
                this.createEle()
            }
            createEle(){
                // 创建元素，初始位置
                this.ele = document.createElement("div");
                this.ele.className = "small-fire";
                this.ele.style.background = randomColor();
                this.ele.style.left = this.bbb.x + "px";
                this.ele.style.top = this.bbb.y + "px";
                this.bbb.cont.appendChild(this.ele);
                // 执行运动
                this.move()
            }
            move(){
                // 计算随机目标
                const x = random(0, this.bbb.cont.offsetWidth-this.ele.offsetWidth);
                const y = random(0, this.bbb.cont.offsetHeight-this.ele.offsetHeight)
                // 开始运动
                move(this.ele,{
                    left:x,
                    top:y
                },()=>{
                    // 结束，删除
                    this.ele.remove();
                })
            }
        }
        const cont = document.getElementById("container");
        // 鼠标单击触发烟花
        cont.onclick = function(eve){
            const e = eve || window.event;
            new Fire({
                x: e.offsetX,
                y: e.offsetY,
                cont: this
            });
        }
        // 自动触发烟花
        // setInterval(() => {
        //     const x = random(0, cont.offsetWidth-20);
        //     const y = random(0, cont.offsetHeight-20);
        //     new Fire({
        //         x: x,
        //         y: y,
        //         cont: cont
        //     });
        // }, 800);


    



    function random(a,b){
        return Math.round(Math.random()*(a-b)+b);
    }
    function randomColor(){
        return `rgb(${random(100,255)},${random(100,255)},${random(100,255)})`;
    }
</script>
</html>